<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件分片下载</title>
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
	 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/layui.css" media="all"/>
</head>
<body>
<div class="content">
    <table class="layui-hide" id="LAY_table_user" lay-filter="categories"></table>
    <!--操作-->
    <div type="text/html" id="barTool" hidden>
        <a class="layui-btn layui-btn-xs" lay-event="download">开始下载</a>
    </div>
</div>
<br/>
<a class="btn btn-default" href="/upload.html">跳转下载页面</a>
<!--引入JS-->
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/layui.js"></script>
<script>
    //分页参数设置 这些全局变量关系到分页的功能
    var pageStart = 1;//开始页数
    var pageTotal = 10;//每页显示数据条数
    var currentPageAllAppoint = 1;//当前页数
    var pageCount = 0;//数据总条数

    var ids = [];
    var data;
     //ajax请求后台数据
     function getShopCustomerManagePageInfo() {
         $.ajax({
             xhrFields: { withCredentials: true },
             type: "get",
             async: false,
             url:"/download/listFile",
             success: function (res) {
                 createTable(res);
                 console.log(res);
             }
         });
     }

    $(document).ready(function () {
        //ajax请求后台数据
        getShopCustomerManagePageInfo();
    });

    //创建分页表格
    function createTable(data) {
        layui.use(['table'], function () {
            var table = layui.table, $ = layui.$;
            console.log(data)
            //表格渲染
            //console.log('=================');
            //console.log(data);
            table.render({
                elem: '#LAY_table_user'  //table的id
                , count: pageCount
                , height: 480
                , cols: [[
                    // {type: 'checkbox', fixed: 'left'},
                    {type: 'numbers', fixed: 'left', width: 50, title: '编号'}
                    , {field: 'filename', title: '文件名称', width: 350, align: 'center'}
                    , {field: 'filepath', title: '文件路径', width: 600, align: 'center'}
                    , {field: 'length', title: '大小(MB)', width: 300, align: 'center'}
                    , {field: 'operation', fixed: 'right', title: '操作', align: 'center', toolbar: '#barTool'} //这里的toolbar值是模板元素的选择器
                ]]
                , data: data  //数据来源
                , id: 'testReload'  //用于表格重载
                , limit: pageTotal

            });
            
            //复选框---批量删除操作
           table.on('tool(categories)', function (obj) {
        	   var data = obj.data; //获得当前行数据
               var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
               //启用
               if (layEvent === 'download') {
            	   var filename = data.md5+"/"+data.filename;
                   window.location = encodeURI(encodeURI("/download/getFile?fileName="+filename))
               }
            });
        });
   }
</script>
</body>
</html>